<template>
  <van-button
    loading-size="20px"
    :loading="isLoading"
    @click="doLikeOrCancle"
    :icon="attitude === 1 ? 'good-job' : 'good-job-o'"
    :class="{ goodAttitude: attitude === 1 }"
  />
</template>

<script>
import { clickLike, clickCancleLike } from '@/api/article/article.js'
export default {
  name: 'ClickLike',
  data () {
    return {
      isLoading: false
    }
  },
  model: {
    prop: 'attitude',
    event: 'changeAttitude'
  },
  props: {
    articleID: {
      type: [String, Number, Object],
      required: true
    },
    attitude: {
      type: Number,
      required: true
    }
  },
  methods: {
    async doLike () {
      this.isLoading = true
      try {
        await clickLike(this.articleID)
        this.$emit('changeAttitude', 1)
      } catch (error) {
        this.$toast.fail('服务器繁忙')
      }
      this.isLoading = false
    },
    async cancleLike () {
      this.isLoading = true
      try {
        await clickCancleLike(this.articleID)
        this.$emit('changeAttitude', -1)
      } catch (error) {
        this.$toast.fail('服务器繁忙')
      }
      this.isLoading = false
    },
    doLikeOrCancle () {
      this.attitude <= 0 ? this.doLike() : this.cancleLike()
    }
  },
  computed: {},
  watch: {},
  components: {}
}
</script>

<style lang="less" scoped>
.goodAttitude {
  color: red;
}
</style>
